<template>
  <div class="department-container">
    <div v-heima="'test'">测试按钮权限的代码</div>
    <el-tree :data="data" default-expand-all>
      <!-- v-slot之能用在template标签上面, slot-scope普通标签也可以使用 -->
      <!-- <div slot-scope="abc"></div> -->
      <!-- <div slot-scope="{data:data1, node:node1}">
        <el-button @click="fn(data1, node1)">测试插槽数据</el-button>
      </div> -->
      <div slot-scope="{data:data1}" class="item">
        <div class="left">{{ data1.name }}</div>
        <div class="right">
          <span style="margin-right:20px">{{ data1.managerName }}</span>
          <!-- $event是模板自带的, 当前事件默认的事件对象, 要传递自己的参数, 把这个默认参数补齐 -->
          <el-dropdown @command="handleCommand($event, data1.id)">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item command="edit">编辑</el-dropdown-item>
              <el-dropdown-item command="del">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-tree>
    <!-- <AddDeptCom ref="addDialogRef" :origin-list="originList" /> -->
    <AddDeptCom ref="addDeptRef" :current-id="currentId" :visible.sync="dialogVisible" :origin-list="originList" @updateParent="getDepartment" />

    <!-- 在自定义组件上面使用v-model, 让父子组件通信更方便 -->
    <!-- <sync-com v-model="count" /> -->
    <!-- <sync-com :value="count" @input="count = $event" /> -->
    <!-- <h3>{{ count }}==={{ msg }}</h3> -->
    <!-- sync也是简化父子通信的语法糖， 假设a.sync 这个绑定，就是父向子传递属性 a, 子向父通知 update:a -->
    <!-- v-model 一个组件只能用一次 和 sync 一个组件可以使用多次  -->
    <!-- <sync-com :msg="msg" @update:msg="msg = $event" /> -->
  </div>
</template>
<script>
// import SyncCom from './syncCom.vue'
import { getDepartmentList, deleteDepartmentRequest } from '@/api/department'
import { transfromListToTree } from '@/utils'
import AddDeptCom from './components/add-dept.vue'
export default {
  name: 'DepartmentCom',
  components: {
    AddDeptCom
    // SyncCom
  },
  data() {
    return {
      data: [],
      count: 1,
      msg: 10,
      dialogVisible: false,
      originList: [],
      currentId: null
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    // fn(a, b) {
    //   console.log(a, 'a')
    //   console.log(b, 'b')
    // },
    async getDepartment() {
      const res = await getDepartmentList()
      // originList这个变量是传递给组件 校验用的
      this.originList = res.data
      // 下面data数据, 是给el-tree组件使用的 树形结构
      console.log(res)
      this.data = transfromListToTree(res.data, 0)
    },
    handleCommand(command, id) {
      this.currentId = id
      console.log(command, this.currentId)
      if (command === 'add') {
        // 可以调用子组件的方法, 将弹出框打开, 不能直接把子组件的数据改了,破坏数据的流向
        // 通过$refs可以访问子组件里面所有的数据和方法
        // 现在的需求:想在父组件里面点击按钮把子组件的弹窗打开?
        // 因为弹出框是否打开,取决于子组件的变量dialogVisbble, 数据不在父组件, 而是在子组件, 我们可以在父组件里面直接调用子组件的方法, 子组件的open方法就是打开弹出框的方法.
        // this.$refs.addDialogRef.open()
        this.dialogVisible = true
      } else if (command === 'edit') {
        // 打开弹出框
        this.dialogVisible = true
        // 数据回填, 需要发请求,(在父组件里面访问子组件的方法)
        this.$refs.addDeptRef.getDepartmentById(this.currentId)
        // this.$nextTick(() => {
        // 这个函数执行的时机，就是等到dom渲染成功以后，再执行
        // currentId在父组件一旦发生改变，里面通知子组件去更新自己的dom页面。dom更新是异步的操作。 需要使用$nextTick 等子组件更新好了以后，props是最新的值了，在调用子组件的方法或者属性，props在js里面才是最新的值
        // this.$refs.addDeptRef.getDepartmentById()
        // })
      } else {
        // alert confirm prompt
        this.$confirm('此操作将删除部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await deleteDepartmentRequest(id)
          // 删除成功以后, 刷新整个tree组件, 就是调用一遍getDepartment函数
          this.getDepartment()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
        })
      }
    }
  }
}
</script>
<style lang='scss'  scoped>
.department-container {
  padding: 20px;
  .item {
  width: 100%;
  height: 30px;
  display: flex;
  .left {
    flex: 4;
    line-height: 30px;
    // background-color: pink;
  }
  .right {
    flex: 1;
    line-height: 30px;
    // background-color: greenyellow;
  }
}
}
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
